<template>
	<!-- #ifndef APP-NVUE -->
	<view class="skLine tmSkeletonLine" :style="[
      { borderRadius: `${round}rpx` },
	  { marginBottom: `${mBottom}rpx`},
      { width: `${width}`},
      { paddingTop: height / 2 + 'rpx', paddingBottom: height / 2 + 'rpx' },
    ]"></view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<view ref="dombg" class="skLine tmSkeletonLine" :style="[
      { borderRadius: `${round}rpx` },
	  { marginBottom: `${mBottom}rpx`},
      { width: `${width}` },
      { paddingTop: height / 2 + 'rpx', paddingBottom: height / 2 + 'rpx' },
    ]"></view>
	<!-- #endif -->
</template>
<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	// #ifdef APP-PLUS-NVUE
	const animation = uni.requireNativePlugin("animation");
	// #endif
	function spinNvueAni(opacity = 0) {
		animation.transition(
			{
				styles: {
					opacity: opacity,
				},
				duration: 1000, //ms
				timingFunction: "linear",
				delay: 0, //ms
			},
			() => {
				nextTick(function () {
					spinNvueAni(opacity == 0 ? 1 : 0);
				});
			}
		);
	}
	export default {
		//属性
		props: {
			width:{
				type: [Number,String],
				default: '100%',
			},
			// 高度
			height: {
				type: Number,
				default: 60,
			},
			//圆角。
			round: {
				type: Number,
				default: 8,
			},
			// 底部外边距
			mBottom:{
				type: Number,
				default: 20,
			}
		},
		// 组件被挂载
		mounted() {
			// #ifdef APP-PLUS-NVUE
				try {
					nextTick(function () {
						setTimeout(function () {
							spinNvueAni();
						}, 50);
					});
				} catch (e) {
					console.log('e===',e);
				}
			// #endif
		}
	}
	
</script>


<style scoped>
	.skLine{
		background: #ebebeb;
	}
	/* #ifndef APP-NVUE */
	.tmSkeletonLine {
		animation: loading 1s linear infinite;
	}

	@keyframes loading {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	/* #endif */
</style>